<template>
  <div style="width:100%; min-height: 1080px; background: white; padding: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1)">
    <h3 style="text-align: center">流水报告查询</h3>
    <p style="text-align: center; color: #c8cbd3; font-size: 14px; margin-top: 15px">流水报告可查询到「微信账单流水」和「支付宝账单流水」</p>

    <el-row type="flex" class="row-bg" justify="space-around" style="margin-top: 50px">
      <el-col :span="3"/>
      <el-col :span="6">
        <div style="width: 100%; text-align: center; height: 500px">
          <el-steps direction="vertical" :active="3" finish-status="process">
            <el-step title="引导客户上传账单" description="上传最近一年的账单"/>
            <el-step title="账单分析" description="账号明细进行分析汇总"/>
            <el-step title="获取账单报告" description="获取客户微信、支付宝流水分析结果"/>
          </el-steps>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="width: 100%; text-align: center; height: 500px">
          <p><span style="color: #2d8cf0">引导方式一</span><span style="font-weight: bold; margin-left: 10px">图片引导</span></p>
          <el-image
            class="h-160px w-100px mt-10px mt-10px"
            lazy
            :src="ydt"
            :preview-src-list="[ydt]"
            preview-teleported
            fit="cover"
          />
          <p><a style="font-size: 14px; color: #2d8cf0" :href="ydt" target="_blank">下载图片</a></p>
          <p style="margin-top: 10px;color: #a5a8b3">分析耗时约1分钟</p>
          <p style="margin-top: 210px;color: #a5a8b3;">活跃度分析、租机分析、先享后付分析、借条分析等</p>
        </div>
      </el-col>
      <el-col :span="6">
        <el-row type="flex" justify="space-around" >
          <el-col :span="24" style="text-align: center">
            <p><span style="color: #2d8cf0">引导方式二</span><span style="font-weight: bold; margin-left: 10px">文字引导</span></p>
          </el-col>
          <el-col :span="24" style="margin-top: 10px; margin-bottom: 10px">
            <p style="border: 1px solid #999; width: 100%; height: 100px; font-size: 12px; color: #8c939d;padding: 10px">{{ydwz}}</p>
          </el-col>
          <el-col :span="24" style="text-align: center">
            <p><a style="font-size: 14px; color: #2d8cf0; text-decoration: underline; cursor: pointer" @click="copyContentMethod">复制文字</a></p>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="3"/>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {BizConfigApi} from "@/api/business/config";

/** 数据查询-流水报告 列表 */
defineOptions({ name: 'LsbgInfoB' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

/** 查询列表 */
const copyContentMethod = async () => {
  navigator.clipboard.writeText(ydwz.value)
  message.success('复制成功')
}

let ydt = ref();
const getydtImage = async () => {
  ydt.value = (await BizConfigApi.getBizConfig(3)).value
}
let ydwz = ref();
const getydwz = async () => {
  ydwz.value = (await BizConfigApi.getBizConfig(4)).value
}

/** 初始化 **/
onMounted(() => {
  getydtImage()
  getydwz()
})
</script>
<style scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  width: 100%;           /* 设置容器高度 */
  height: 500px;           /* 设置容器高度 */
}
</style>
